<template>
  <div class="select-yuyue-date">
    <mt-field label="预约时间:" placeholder="请选择日期" type="text" v-model="allotDateYuyue" readonly="readonly" @click.native="openPicker"></mt-field>
    <mt-cell
      title="选择时段:" class="mint-field select-time-slot" v-if="allotDateYuyue!=''">
      <dl class="date-list">
        <dd class="date-item" v-for="(item,index) in dateList" :class="{active:curIndex==index}" @click="handleSelectDate(item,index)">
          <span class="date-title">{{item.label}}</span>
        </dd>
      </dl>
    </mt-cell>

    <!--时间弹窗-->
      <mt-datetime-picker
        ref="picker"
        v-model="pickerValue"
        type="date"
        month-format="{value} 月"
        date-format="{value} 日"
        :startDate="startDate"
        :endDate="endDate"
        @confirm="handleDateChange">
      </mt-datetime-picker>
    <!--时间弹窗-->
  </div>
</template>

<script>
export default {
  data(){
    return{
      dateList:[],
      curIndex:-1,
      pickerValue:new Date(),
      startDate:new Date(),
      endDate:new Date(new Date().getTime()+2 * 24 * 3600 * 1000),
      allotDateYuyue:'',
      bookTimeStart:'',
      bookTimeEnd:'',
    }

  },

  methods:{

    /**打开预约时间**/
    openPicker(type) {
      this.$refs.picker.open();
    },
    /**确认预约时间**/
    handleDateChange(){
      const d = new Date(this.pickerValue);
      const year=d.getFullYear();
      var month='';
      var date='';
      if(d.getMonth()+1<=9){
        month='0'+(d.getMonth()+1)
      }else{
        month=d.getMonth()+1
      };
      if(d.getDate()+1<=10){
        date='0'+d.getDate()
      }else{
        date=d.getDate()
      };
      this.startTime=d.getTime();
      this.allotDateYuyue=year + '-' + month + '-' + date;

      if(new Date().getTime()-new Date(this.allotDateYuyue).getTime()>=0){
        var nowHour=new Date().getHours();
        if(nowHour>8 && nowHour<15){
          this.dateList=[
            {
              label:'下午',
              value:'14:00~18:00',
            },{
              label:'晚上',
              value:'20:00~24:00',
            },
          ];
        }else if(nowHour>12 && nowHour<18){
          this.dateList=[{
              label:'晚上',
              value:'20:00~24:00',
            },
          ];
        }
      }else{
        this.dateList=[
          {
            label:'早上',
            value:'08:00~12:00',
          },{
            label:'下午',
            value:'14:00~18:00',
          },{
            label:'晚上',
            value:'20:00~24:00',
          },
        ];
      }

      this.curIndex=0;
      const timeRange=this.dateList[0].value;
      const dateTimeYuyue={
        allotDateYuyue:this.allotDateYuyue,
        bookTimeStart:this.allotDateYuyue+' '+timeRange.split('~')[0],
        bookTimeEnd:this.allotDateYuyue+' '+timeRange.split('~')[1],
      };
      this.$emit('getDateTimeYuyue',dateTimeYuyue)
    },
    /**选择预约时段**/
    handleSelectDate(item,index){
      this.curIndex=index;
      const dateTimeYuyue={
        allotDateYuyue:this.allotDateYuyue,
        bookTimeStart:this.allotDateYuyue+' '+item.value.split('~')[0],
        bookTimeEnd:this.allotDateYuyue+' '+item.value.split('~')[1],
      }
      this.$emit('getDateTimeYuyue',dateTimeYuyue)
    },
  }
}
</script>

<style>
  .select-yuyue-date .select-time-slot .mint-cell-wrapper{
    align-items: flex-start;
  }
  .select-yuyue-date .select-time-slot .mint-cell-title{
    padding:3px 0 0;
  }
</style>
